<template>
  <div v-if="permissionsLists(44)">
    <page-header :title="$t('m.Station_Powerbankoverview')">
      <el-button
        type="primary"
        v-if="details.state != 4 && permissionsLists(180)"
        :disabled="details.state == 6 || !details.scanNo"
        @click="dialogClick(3)"
      >
        {{ $t('m.Station_eject') }}
      </el-button>
      <el-button
        type="primary"
        v-if="permissionsLists(181)"
        :disabled="details.state == 6 || !details.scanNo"
        @click="dialogClick(1)"
      >
        {{ $t('m.Station_refreshBattery') }}
      </el-button>
      <el-button
        type="primary"
        :disabled="
          details.state == 0 || details.state == 1 || details.state == 6
        "
        v-if="permissionsLists(182)"
        @click="dialogClick(2)"
      >
        {{ $t('m.initialize') }}
      </el-button>
    </page-header>
    <div class="container" style="margin-top:0">
      <div class="detail_div">
        <div class="detail_left">
          <div class="detail_left_div">
            <div class="detail_title">
              <div style=" display: flex;align-items: center;">
                <span style="font-size: 16px;">{{
                  $t('m.Bank_information')
                }}</span>
                <div
                  class="detail_state"
                  :style="details.state | valFormat(stateOption1, 1)"
                >
                  <span
                    class="detail_state_dot"
                    :style="details.state | valFormat(stateOption2, 1)"
                  ></span>
                  <span class="detail_state_text">{{
                    details.state | valFormat(stateOption1)
                  }}</span>
                </div>
              </div>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Order_List_Powerbank') }}: </span
              ><span class="detail_text2">{{ details.pbNo | strFormat }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Station_Batterylevel') }}: </span>
              <span class="detail_text2"
                >{{ details.bc | strFormat }} <span v-show="details.bc">%</span>
              </span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.branch_Creationdate') }}: </span>
              <span class="detail_text2">{{
                details.createTime | dateformat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Synchronization_time') }}: </span>
              <span class="detail_text2">{{
                details.lastUploadTime | dateformat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Total_charging_cycles') }}: </span>
              <span class="detail_text2">{{
                details.cumulativeChargeCount | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Temperature') }}: </span>
              <span class="detail_text2"
                >{{ details.temperature | strFormat
                }}<span v-show="details.temperature">°C</span></span
              >
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Discharge_current') }}: </span>
              <span class="detail_text2"
                >{{ $format.numberFormat(details.dischargeCurrent).toFixed(1)
                }}A</span
              >
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Cell_voltage') }}: </span>
              <span class="detail_text2"
                >{{ $format.numberFormat(details.cellVoltage).toFixed(1)
                }}V</span
              >
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Charging_current') }}: </span>
              <span class="detail_text2"
                >{{ $format.numberFormat(details.current).toFixed(1)
                }}A</span
              >
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Charging_voltage') }}: </span>
              <span class="detail_text2"
                >{{ $format.numberFormat(details.voltage).toFixed(1)
                }}V</span
              >
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Station_breakageSum') }}: </span>
              <span class="detail_text2">{{
                details.damageNum | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Station_Reportfaultydate') }}: </span>
              <span class="detail_text2">{{
                details.lastDamagedTime | dateformat
              }}</span>
            </div>
          </div>
          <div class="detail_left_div">
            <div class="detail_title">{{ $t('m.Revenue_bank') }}</div>
            <div class="detail_text">
              <span>{{ $t('m.Oders_Oders') }}: </span>
              <span class="detail_text2">{{
                details.revenue.orderNum | numberFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Revenue') }}: </span>
              <span class="detail_text2">{{
                details.revenue.revenueAmount | amountFormat
              }}</span>
            </div>
          </div>
          <div class="detail_left_div">
            <div class="detail_title">
              {{ $t('m.Station_Stationinformation') }}
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Station_Station_ID') }}: </span>
              <span class="detail_text2">{{
                details.scanNo | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Order_slotNoNum') }}: </span>
              <span class="detail_text2">{{ details.pos | strFormat }}</span>
            </div>
          </div>
          <div class="detail_left_div">
            <div class="detail_title">{{ $t('m.Station_Lastorder') }}</div>
            <div class="detail_text">
              <span>{{ $t('m.Station_Faulty_User') }}: </span>
              <span class="detail_text2">{{
                details.lastUser | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Order_Duration') }}: </span>
              <span class="detail_text2">{{
                details.lastPopTime | dateformat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Users_Details_PhoneNo') }}: </span>
              <span class="detail_text2">{{ details.phone | strFormat }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Email') }}: </span>
              <span class="detail_text2">{{ details.email | strFormat }}</span>
            </div>
          </div>
        </div>
        <div class="detail_right">
          <div class="detail_left_div" style="width:580px;">
            <div class="detail_title" style="padding-bottom:0;">
              {{ $t('m.Total_charging_cycles') }}
            </div>
            <div class="detail_text">
              <div id="chargeEacharts" style="width:100%;height: 226px"></div>
            </div>
          </div>
          <div class="detail_left_div" style="width:580px;">
            <div class="detail_title" style="padding-bottom:0;">
              {{ $t('m.Temperature') }} (°C)
            </div>
            <div class="detail_text">
              <div id="tempEacharts" style="width:100%;height: 226px"></div>
            </div>
          </div>
          <div class="detail_left_div" style="width:580px;">
            <div class="detail_title" style="padding-bottom:0;">
              {{ $t('m.Electricity') }} (A)
            </div>
            <div class="detail_text">
              <div id="currentEacharts" style="width:100%;height: 246px"></div>
            </div>
          </div>
          <div class="detail_left_div" style="width:580px;">
            <div class="detail_title" style="padding-bottom:0;">
              {{ $t('m.Voltage') }} (V)
            </div>
            <div class="detail_text">
              <div id="voltageEacharts" style="width:100%;height: 246px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出、刷新、恢复 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="operateDialog"
      :title="dialogType | stateFormat(optionsTitle)"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ dialogType | stateFormat(optionsText) }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="operateDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changePower" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import chart from '@/mixins/chart'
export default {
  mixins: [chart],
  data () {
    return {
      stateOption1: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Station_untapped'),
          color: 'background: #e6fbee;'
        },
        {
          value: 1,
          label: this.$t('m.Order_Status_Renting'),
          color: 'background: #dbf5ff;'
        },
        {
          value: 2,
          label: this.$t('m.Station_Damaged'),
          color: 'background: #ffe8e8;'
        },
        // {
        //   value: 3,
        //   label: '已报失'
        // },
        {
          value: 4,
          label: this.$t('m.Station_eject2'),
          color: 'background: #ffe8e8;'
        },
        {
          value: 5,
          label: this.$t('m.Station_Sold'),
          color: 'background: #e6fbee;'
        },
        {
          value: 6,
          label: this.$t('m.Inventory'),
          color: 'background: #fff7e7;'
        }
      ],
      stateOption2: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Station_untapped'),
          color: 'background: #4CE48A;'
        },
        {
          value: 1,
          label: this.$t('m.Order_Status_Renting'),
          color: 'background: #00B9FF;'
        },
        {
          value: 2,
          label: this.$t('m.Station_Damaged'),
          color: 'background: #FF605A;'
        },
        // {
        //   value: 3,
        //   label: '已报失'
        // },
        {
          value: 4,
          label: this.$t('m.Station_eject2'),
          color: 'background: #FF605A;'
        },
        {
          value: 5,
          label: this.$t('m.Station_Sold'),
          color: 'background: #4CE48A;'
        },
        {
          value: 6,
          label: this.$t('m.Inventory'),
          color: 'background: #FFC855;'
        }
      ],
      optionsTitle: [
        {
          value: 1,
          label: this.$t('m.Station_refreshBattery')
        },
        {
          value: 2,
          label: this.$t('m.initialize')
        },
        {
          value: 3,
          label: this.$t('m.Station_eject')
        }
      ],
      optionsText: [
        {
          value: 1,
          label: this.$t('m.Station_Confirm_to')
        },
        {
          value: 2,
          label: this.$t('m.Station_reactivate_power')
        },
        {
          value: 3,
          label: this.$t('m.Station_eject_power_bank')
        }
      ],
      operateDialog: false, //充电宝刷新/恢复/弹出
      details: {
        area: '', //	区域码
        bc: '', //	电量: 1-100
        cabinetNo: '', //	机柜编号
        cellVoltage: 0, //	电芯电压
        chargeSwitch: '', //	充电开关参数(默认为0): 0-开 1-关,可用值:0,1
        createTime: '', //	创建时间
        cumulativeCharge: '', //	累计充电
        cumulativeChargeCount: '', //	累计充电次数
        current: 0, //	电流
        damageNum: '', //	报损次数
        deviceState: '', //	充电宝状态: 0x00 没有移动电源\n0x01 充电宝正常\n0x02 充电异常\n0x03 通讯异常\n0x04 卡宝\n0x05 按键被强制释放\n0x06 归还时电磁阀未归位\n0x07 无\n0x08 防盗协议通信不成功\n0x09 Typec短路\n0x0A 归还失败，电池不弹出\n0x0B~0x0FF 保留
        dischargeCurrent: 0, //	放电电流
        email: '', //	用户邮箱
        hardVersion: '', //	硬件版本
        id: '', //	充电宝主键id
        isAbnormal: '', //	是否异常: 0-否 1-是
        isAbnormalCellCurrent: '', //	机芯电流是否异常: 0-否 1-是
        isAbnormalCellVoltage: '', //	机芯电压是否异常: 0-否 1-是
        isAbnormalChargeCurrent: '', //	充电电流是否异常: 0-否 1-是
        isAbnormalChargeVoltage: '', //	充电电压是否异常: 0-否 1-是
        isOverCharge: '', //	过量充电: 0-否 1-是
        isOverTemperature: '', //	温度是否异常: 0-否 1-是
        lastDamagedTime: '', //	最后报损时间
        lastPopTime: '', //	最后弹出时间
        lastReturnTime: '', //	最后归还时间
        lastUploadTime: '', //	同步时间
        lastUser: '', //	最后使用人
        orderNo: '', //	订单号
        pbNo: '', //	充电宝编号
        phone: '', //	手机号
        pos: '', //	仓位位置
        revenue: {
          currency: '', //	货币
          orderNum: '', //	订单数
          revenueAmount: '' //收益
        }, //	收益
        scanNo: '', //	扫码编号
        softVersion: '', //	软件版本
        state: '', //	使用状态: 0-未使用 1-租借中 2-已损坏 3-已报失 4-强制弹出 5-已售卖 6-库存,可用值:0,1,2,3,4,5
        temperature: '', //	温度
        type: '', //	类型: 1-曼联 2-倍斯特 3-万事通,可用值:1,2,3
        useNum: '', //	使用次数
        voltage: 0 //	电压
      }, //详情内容
      rangeTime: [],
      dialogType: '', //弹窗类型
      resData: [
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        },
        {
          timestamp: '',
          value: 0
        }
      ],
      electricityData: {
        data: []
      }, //充电次数
      temperatureData: {
        data: []
      }, //温度
      chargingData: {
        data: []
      }, //充电电流
      dischargeData: {
        data: []
      }, //放电电流
      cellData: {
        data: []
      }, //电芯电压,
      chargingVData: {
        data: []
      }, //充电电压,
      chartInstance: {
        chargeEacharts: null, //充电
        tempEacharts: null, //温度
        currentEacharts: null, //电流
        voltageEacharts: null //电压
      },
      permissionsIds: []
    }
  },

  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(44)) {
      return
    }
    // 减去24小时的毫秒数
    const nowTime = Date.parse(new Date())
    const oneDayAgo = Date.parse(new Date()) - 23 * 60 * 60 * 1000
    // 将毫秒数转换为时间戳
    const beforeTime = Math.floor(oneDayAgo)
    for (let i = 0; i < 24; i++) {
      let timestamp = beforeTime + i * 3600000
      this.resData.forEach((item, index) => {
        index == i ? (item.timestamp = timestamp) : ''
      })
    }
    this.rangeTime = [beforeTime, nowTime]
    this.getDetails()
  },
  mounted () {
    // this.getEcharts()
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    //获取详情
    getDetails () {
      this.$api.equipment.getPowerDetail(this.$route.query.id).then(res => {
        if (this.$ok(res)) {
          this.details = res.data
          this.getTotalElectricity()
          this.getBankTemp()
          this.getElectricity()
          this.getVoltage()
        }
      })
    },
    getEcharts () {
      const xyData1 = this.$util.buildChartXYDataForTimestamp(
        this.electricityData,
        'hour',
        false,
        false
      )
      const xyData2 = this.$util.buildChartXYDataForTimestamp(
        this.temperatureData,
        'hour',
        false,
        false
      )
      const xyData3 = this.$util.buildChartXYDataForTimestamp(
        this.dischargeData,
        'hour',
        false,
        false
      )
      const xyData4 = this.$util.buildChartXYDataForTimestamp(
        this.chargingData,
        'hour',
        false,
        false
      )
      const xyData5 = this.$util.buildChartXYDataForTimestamp(
        this.cellData,
        'hour',
        false,
        false
      )
      const xyData6 = this.$util.buildChartXYDataForTimestamp(
        this.chargingVData,
        'hour',
        false,
        false
      )
      this.chartInstance.chargeEacharts.setOption(
        this.getLineChartOptions(xyData1)
      )
      this.chartInstance.tempEacharts.setOption(
        this.getLineChartOptions(xyData2)
      )
      this.chartInstance.currentEacharts.setOption(
        this.getLineChartOptionsTwo(
          xyData3,
          xyData4,
          this.$t('m.Discharge_current'),
          this.$t('m.Charging_current')
        )
      )
      this.chartInstance.voltageEacharts.setOption(
        this.getLineChartOptionsTwo(
          xyData5,
          xyData6,
          this.$t('m.Cell_voltage'),
          this.$t('m.Charging_voltage')
        )
      )
    },
    //累计循环充电次数
    getTotalElectricity () {
      this.$api.equipment
        .getPowerTotalCharge(this.details.pbNo, this.rangeTime)
        .then(res => {
          if (res.code == 0) {
            this.electricityData.data =
              res.data.length == 0 ? this.resData : res.data
            const xyData1 = this.$util.buildChartXYDataForTimestamp(
              this.electricityData,
              'hour',
              false,
              false
            )
            this.chartInstance.chargeEacharts.setOption(
              this.getLineChartOptions(xyData1)
            )
          }
        })
    },
    //温度数据
    getBankTemp () {
      this.$api.equipment
        .getPowerTemp(this.details.pbNo, this.rangeTime)
        .then(res => {
          if (res.code == 0) {
            // console.log(res, '2')
            this.temperatureData.data =
              res.data.length == 0 ? this.resData : res.data
            const xyData2 = this.$util.buildChartXYDataForTimestamp(
              this.temperatureData,
              'hour',
              false,
              false
            )
            this.chartInstance.tempEacharts.setOption(
              this.getLineChartOptions(xyData2)
            )
          }
        })
    },
    //电流数据
    getElectricity () {
      this.$api.equipment
        .getPowerCurrent(this.details.pbNo, this.rangeTime)
        .then(res => {
          if (res.code == 0) {
            // console.log(res, '3')
            this.dischargeData.data =
              res.data.dischargeCurrent.length == 0
                ? this.resData
                : res.data.dischargeCurrent
            this.chargingData.data =
              res.data.chargingCurrent.length == 0
                ? this.resData
                : res.data.chargingCurrent
            const xyData3 = this.$util.buildChartXYDataForTimestamp(
              this.dischargeData,
              'hour',
              false,
              false
            )
            const xyData4 = this.$util.buildChartXYDataForTimestamp(
              this.chargingData,
              'hour',
              false,
              false
            )
            this.chartInstance.currentEacharts.setOption(
              this.getLineChartOptionsTwo(
                xyData3,
                xyData4,
                this.$t('m.Discharge_current'),
                this.$t('m.Charging_current')
              )
            )
          }
        })
    },

    //电压数据
    getVoltage () {
      this.$api.equipment
        .getPowerVoltage(this.details.pbNo, this.rangeTime)
        .then(res => {
          if (res.code == 0) {
            // console.log(res, '4')
            this.cellData.data =
              res.data.chipVoltage.length == 0
                ? this.resData
                : res.data.chipVoltage
            this.chargingVData.data =
              res.data.chargingVoltage.length == 0
                ? this.resData
                : res.data.chargingVoltage
            const xyData5 = this.$util.buildChartXYDataForTimestamp(
              this.cellData,
              'hour',
              false,
              false
            )
            const xyData6 = this.$util.buildChartXYDataForTimestamp(
              this.chargingVData,
              'hour',
              false,
              false
            )
            this.chartInstance.voltageEacharts.setOption(
              this.getLineChartOptionsTwo(
                xyData5,
                xyData6,
                this.$t('m.Cell_voltage'),
                this.$t('m.Charging_voltage')
              )
            )
          }
        })
    },

    //弹出、刷新、恢复
    dialogClick (e) {
      this.dialogType = e
      this.operateDialog = true
    },

    //修改充电宝状态
    changePower () {
      this.$openLoading()
      if (this.dialogType == 1) {
        this.refreshPower()
      } else if (this.dialogType == 2) {
        this.initializePower()
      } else {
        this.ejectPower()
      }
    },

    //操作按钮结果
    getRes (res) {
      if (this.$ok(res)) {
        this.$message.success(res.message)
        this.getDetails()
        this.operateDialog = false
        this.$closeLoading()
      } else {
        this.$message.error(res.message)
        this.$closeLoading()
      }
    },

    //刷新充电宝
    refreshPower () {
      let params = {
        cabinetNo: this.details.scanNo
      }
      this.$api.equipment.refreshPower(params).then(res => {
        this.getRes(res)
      })
    },

    //恢复充电宝
    initializePower () {
      this.$api.equipment.initializePower(this.details.id).then(res => {
        this.getRes(res)
      })
    },

    //弹出充电宝
    ejectPower () {
      let params = {
        cabinetNo: this.details.scanNo,
        pos: this.details.pos,
        powerBankId: this.details.id
      }
      this.$api.equipment.ejectPower(params).then(res => {
        this.getRes(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header,
.container {
  max-width: 1220px;
}
</style>
